<template>
    <view class="setPasswordClass">
        <Navbar title="修改密码"> </Navbar>
        <van-form @submit="submitSetPasswordForm">
            <view class="p-20rpx">
                <view class="w-full box b-rd-6px">
                    <van-field
                        v-model="oldPassword"
                        required
                        clearable
                        label="旧密码"
                        placeholder="请输入旧密码"
                        :rules="[{ required: true, message: '请输入旧密码' }]"
                    />
                    <van-field
                        v-model="newPassword"
                        clearable
                        required
                        label="新密码"
                        placeholder="请输入新密码"
                        :rules="[
                            { required: true, message: '请输入新密码' },
                            {
                                validator: () => {
                                    return passwordVaildateFn(newPassword)
                                },
                                message: '长度在 6 到 20 个字符',
                            },
                        ]"
                    />
                    <van-field
                        v-model="confirmPassword"
                        clearable
                        required
                        label="确认密码"
                        placeholder="请确认新密码"
                        :rules="[
                            { required: true, message: '请输入新密码' },
                            {
                                validator: () => {
                                    return compare(confirmPassword, newPassword)
                                },
                                message: '两次输入的密码不一致',
                            },
                        ]"
                    />
                </view>
            </view>
            <view
                class="w-full box-border p-20rpx f-c-c position-fixed left-0 bottom-0"
            >
                <van-button
                    class="w-full text-hex-FFFFFF b-rd-6rpx f-c-c text-28rpx"
                    color="#55AFFE"
                    native-type="submit"
                >
                    提交
                </van-button>
            </view>
        </van-form>
    </view>
</template>
<script>
import { defineComponent, reactive, toRefs, onMounted } from 'vue'
import { updatePwdApi } from '@/api/login.js'
export default defineComponent({
    props: {},
    setup(props, { emit }) {
        const state = reactive({
            oldPassword: '',
            newPassword: '',
            confirmPassword: '',
        })
        const methods = {
            /* 密码验证 */
            passwordVaildateFn(value) {
                if (value.length < 6 || value.length > 20) {
                    return false
                } else {
                    return true
                }
            },
            /* 密码比较函数验证 */
            compare(pasOne, pasTwo) {
                if (pasOne != pasTwo) {
                    return false
                } else {
                    return true
                }
            },
            /* 修改密码表单 */
            submitSetPasswordForm(values) {
                uni.showToast({
                    title: '数据处理中请稍后!',
                    icon: 'none',
                })
                let form = {
                    oldPassword: state.oldPassword,
                    newPassword: state.newPassword,
                }
                apis.updatePwd(form).then((res) => {
                    if (res.code == 200) {
                        uni.$success('密码更新成功！')
                        setTimeout(() => {
                            uni.navigateBack()
                        }, 1000)
                    }
                })
            },
        }
        const apis = {
            /* 获取登录人信息 */
            updatePwd(data) {
                return new Promise((resolve, reject) => {
                    updatePwdApi(data.oldPassword, data.newPassword).then(
                        (res) => {
                            if (res.code == 200) {
                                resolve(res)
                            }
                        }
                    )
                })
            },
        }
        const computeds = {}
        onMounted(() => {})
        return {
            ...apis,
            ...toRefs(state),
            ...methods,
            ...computeds,
        }
    },
})
</script>
<style lang="less" scoped></style>
